<template>
  <div class="rank-list">
    <div class="rank-list-title">{{ title }}</div>
    <table>
      <thead class="rank-list-head">
        <tr>
          <th
            v-for="{ value, width, key } in columns"
            :key="'head-' + key"
            :style="`width: ${width};`"
          >
            {{ value }}
          </th>
        </tr>
      </thead>
      <tbody class="rank-list-body">
        <tr v-for="(row, index) in rows" :key="'row-' + index">
          <td
            v-for="record in row"
            :key="record.key"
            :style="`width: ${record.width};`"
          >
            <slot :name="record.key" v-bind="record"></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: "RankList",
  mixins: [],
  props: {
    title: {
      type: String,
      default: "",
    },
    columns: {
      type: Array,
      default: () => [],
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    rows() {
      return this.items.map((item) =>
        this.columns.map(({ key, width }) => ({
          ...item,
          value: item[key],
          key,
          width,
        }))
      );
    },
  },
  methods: {
    // rows(item) {
    //     return this.columns.map(({ key, width }) => {
    //         return {
    //             value: item[key],
    //             key: key,
    //             width,
    //         };
    //     });
    // },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.rank-list {
  table {
    width: auto;
  }
  /* Frame 514678536 */

  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;

  &-title {
    width: 100%;
    height: 20px;

    /* H4-14px */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* N1 */
    color: #1f264d;
  }
  &-head {
    th {
      width: 100%;
      height: 21px;

      /* Small/UI */
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 21px;
      text-align: left;
      padding-right: 2px;

      /* N3 */
      color: #898ca3;
    }
  }

  &-body {
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
      vertical-align: middle;
    }

    td {
      width: 100%;
      height: 16px;

      /* H5-12px */
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      text-align: left;

      /* N1 */
      color: #1f264d;
    }
  }
}
</style>
